<template>

  <div
    v-if="ifHave"
    style="display: flex;justify-content: flex-end"
  >
    <el-link
      :underline="false"
      style="display: flex;align-items: center"
      type="primary"
      @click="onClick"
    >查看历史分配信息
    </el-link>
  </div>

  <el-form
    :inline="true"
    label-position="right"
    label-width="120px"
  >

    <el-row
      :gutter="20"
      style="width:100%"
    >

      <el-col :span="8">
        <el-form-item label="分配人：">
          {{ datas.allocationAgent?.creatorName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="分配时间：">
          {{ dateFormat('yyyy-mm-dd HH:MM', datas.allocationAgent?.createdAt) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="分配跟进职员：">
          {{ datas.allocationAgent?.headName }}
        </el-form-item>
      </el-col>

      <el-col
        v-if="datas.allocationAgent?.ifAccept == 1"
        :span="8"
      >
        <el-form-item label="职员接受时间：">
          {{ dateFormat('yyyy-mm-dd HH:MM', datas.allocationAgent?.dealTime) }}
        </el-form-item>
      </el-col>

      <el-col
        v-if="datas.allocationAgent?.ifAccept == 2"
        :span="8"
      >
        <el-form-item label="职员拒绝时间：">
          {{ dateFormat('yyyy-mm-dd HH:MM', datas.allocationAgent?.dealTime) }}
        </el-form-item>
      </el-col>

      <el-col
        v-if="datas.allocationAgent?.ifAccept == 2"
        :span="8"
      >
        <el-form-item label="职员拒绝原因：">
          {{ datas.allocationAgent?.refuseReason }}
        </el-form-item>
      </el-col>

      <el-col
        v-if="datas.allocationAgent?.failTime"
        :span="8"
      >
        <el-form-item label="开发失败时间：">
          {{ dateFormat('yyyy-mm-dd HH:MM', datas.allocationAgent?.failTime) }}
        </el-form-item>
      </el-col>

    </el-row>

  </el-form>

  <el-table
    v-if="datas.planInfo.planType == 1 || datas.planInfo.planType == 2"
    :data="datas.allocationAgent.allocationAgentDetails"
    header-cell-class-name="table-header"
    border
    size="medium"
  >
    <el-table-column
      type="index"
      label="序号"
      width="55"
    />
    <el-table-column
      :show-overflow-tooltip="true"
      align="left"
      header-align="center"
      label="代理名称"
      prop="agentName"
    />
    <el-table-column
      :show-overflow-tooltip="true"
      align="left"
      header-align="center"
      label="所在地区"
    >
      <template #default="{row}">
        <span v-if="row.agentType == 'agent'">{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
        <span v-else>{{ row.address }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :show-overflow-tooltip="true"
      align="center"
      header-align="center"
      label="代理商状态"
    >
      <template #default="{row}">
        <!--        <span v-if="row.tradeStatus == 1">正式代理商</span>-->
        <!--        <span v-else>准代理商</span>-->
        <span v-if="row.agentType == 'agent'">{{ getLabel('agent_status', row?.agentStatus) }}</span>
        <span v-else>{{ getLabel('agent_status_person', row?.agentStatus) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :show-overflow-tooltip="true"
      align="center"
      header-align="center"
      label="开发跟进期限"
    >
      <template #default="{row}">
        {{ dateFormat('yyyy-mm-dd', row.dealTime) }}
      </template>
    </el-table-column>
  </el-table>

  <!--  <el-table v-else-if="datas.planInfo.planType == 3" :data="datas.allocationAgentDetails" header-cell-class-name="table-header" border size="medium">-->
  <!--    <el-table-column type="index" label="序号" width="55"/>-->
  <!--    <el-table-column-->
  <!--            :show-overflow-tooltip="true"-->
  <!--            align="left"-->
  <!--            header-align="center"-->
  <!--            label="终端名称"-->
  <!--            prop="agentName"-->
  <!--    />-->
  <!--    <el-table-column-->
  <!--            :show-overflow-tooltip="true"-->
  <!--            align="left"-->
  <!--            header-align="center"-->
  <!--            label="所在地区"-->
  <!--    >-->
  <!--      <template #default="{row}">-->
  <!--        <span v-if="row.agentType == 'agent'">{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>-->
  <!--        <span v-else>{{ row.address }}</span>-->
  <!--      </template>-->
  <!--    </el-table-column>-->
  <!--    <el-table-column-->
  <!--            :show-overflow-tooltip="true"-->
  <!--            align="left"-->
  <!--            header-align="center"-->
  <!--            label="终端类型"-->
  <!--    >-->
  <!--      <template #default="{row}">-->

  <!--      </template>-->
  <!--    </el-table-column>-->
  <!--    <el-table-column-->
  <!--            :show-overflow-tooltip="true"-->
  <!--            align="left"-->
  <!--            header-align="center"-->
  <!--            label="负责营销职员"-->
  <!--    >-->
  <!--      <template #default="{row}">-->

  <!--      </template>-->
  <!--    </el-table-column>-->
  <!--    <el-table-column-->
  <!--            :show-overflow-tooltip="true"-->
  <!--            align="left"-->
  <!--            header-align="center"-->
  <!--            label="注册日期"-->
  <!--    >-->
  <!--      <template #default="{row}">-->
  <!--        {{ dateFormat('yyyy-mm-dd', row.dealTime) }}-->
  <!--      </template>-->
  <!--    </el-table-column>-->
  <!--    <el-table-column-->
  <!--            :show-overflow-tooltip="true"-->
  <!--            align="left"-->
  <!--            header-align="center"-->
  <!--            label="开发状态"-->
  <!--    >-->
  <!--      <template #default="{row}">-->

  <!--      </template>-->
  <!--    </el-table-column>-->

  <!--  </el-table>-->

  <el-table
    v-else-if="datas.planInfo.planType == 4"
    :data="datas.allocationAgent.allocationAgentDetails"
    header-cell-class-name="table-header"
    border
    size="medium"
  >
    <el-table-column
      type="index"
      label="序号"
      width="55"
    />
    <el-table-column
      :show-overflow-tooltip="true"
      align="left"
      header-align="center"
      label="商销客户名称"
      prop="sellerName"
    />
    <el-table-column
      :show-overflow-tooltip="true"
      align="left"
      header-align="center"
      label="所在地区"
    >
      <template #default="{row}">
        <span>{{ row.selProvinceName }}/{{ row.selCityName }}/{{ row.selAreaName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :show-overflow-tooltip="true"
      align="center"
      header-align="center"
      label="客户状态"
    >
      <template #default="{row}">
        {{ getLabel('seller_status', row.sellerStatus) }}
      </template>
    </el-table-column>
    <el-table-column
      :show-overflow-tooltip="true"
      align="center"
      header-align="center"
      label="开发跟进期限"
    >
      <template #default="{row}">
        {{ dateFormat('yyyy-mm-dd', row.dealTime) }}
      </template>
    </el-table-column>
  </el-table>

  <detail-drawer
    ref="detailDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>

      <span>历史分配信息 </span>

    </template>
    <template #contents>

      <agentHistoryView
        :id="id"
        :type="datas.planInfo.planType"
      />

    </template>
  </detail-drawer>

</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  reactive,
  toRefs,
  watch,
} from 'vue'

export default defineComponent({
  name: 'AgentView',
  components: {
    agentHistoryView: defineAsyncComponent(() =>
      import('./agentHistoryView.vue')
    ),
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    id: {
      type: Number,
      default: 0,
    },
    ifHave: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, {}) {
    var data = reactive({
      agent: {},
      detailDrawer: null,
    })

    watch(
      () => props.datas,
      (newV, oldV) => {}
    )

    const onClick = () => {
      data.detailDrawer.open()
    }

    return {
      ...toRefs(data),

      onClick,
    }
  },
})
</script>

<style scoped>
</style>
